<!--
 * 图标
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-icon" :class="_classes" :style="_styles" :hover-class="hoverClass" @tap="_handleClick">
        <!-- 字体图标 -->
        <text class="pure-icon-iconfont" :class="_iconfontClasses" v-if="!_isImage"></text>

        <!-- 图片图标 -->
        <image class="pure-icon-image" :src="name" :mode="mode" v-else></image>
    </view>
</template>

<script>
export default {
    options: {
        // 将自定义节点设置成虚拟的
        // #ifndef MP-TOUTIAO
        virtualHost: true,
        // #endif

        // 组件样式隔离
        styleIsolation: "apply-shared",

        // 允许使用多个插槽
        multipleSlots: true
    }
}
</script>

<script setup>
import { computed } from "vue";
import props from "./props.js";


// props
const _props = defineProps(props);

// emits
const _emits = defineEmits(["onClick"]);

// classes
const _classes = computed(() => {
    const arr = [];
    return arr;
});

// styles
const _styles = computed(() => {
    const arr = [];
    return arr;
});

// 图标名称（类名）
const _iconfontClasses = computed(() => {
    const arr = [];

    //  图片图标
    if (_isImage.value) return arr;

    //  内置字体图标
    if (_props.name.startsWith("__")) {
        arr.push(`pure-iconfont pure-iconfont${_props.name}`);
        return arr;
    }

    //  扩展字体图标
    arr.push(_props.name);

    return arr;
});

// 判断是否为图片图标
const _isImage = computed(() => _props.name?.includes("/"));

// 点击事件
function _handleClick() {
    _emits("onClick");
}
</script>

<style scoped>
@import "./iconfont.css";
@import "./style.css";
</style>
